<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css"/>
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css"/>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">

        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">抖音链接</li>
                <li>上传视频</li>
            </ul>
            <div class="layui-tab-content">
                <!-- 基本信息 -->
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="">

                        <div>
                            <div class="main-container mr-5">
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">分类</label>
                                    <div class="layui-input-block">
                                        <div name="category_id" id="category" required value=""></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">抖音链接</label>
                                    <div class="layui-input-block">
                                        <textarea name="filename" placeholder="请输入" required lay-verify="required"
                                                  class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">素材组别</label>
                                    <div class="layui-input-block">
                                        <div name="group" id="group" value=""></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" id="status" lay-filter="status" lay-skin="switch"
                                               lay-text="开启|关闭"/>
                                        <input type="text" style="display:none" name="status" value="1"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br><br>
                        <div class="bottom">
                            <div class="button-container">
                                <button type="submit" class="pear-btn pear-btn-primary pear-btn-md"
                                        lay-submit=""
                                        lay-filter="save">
                                    提交
                                </button>
                                <button type="reset" class="pear-btn pear-btn-md">
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="layui-tab-item">
                    <form class="layui-form" action="">

                        <div>
                            <div class="main-container mr-5">

                                <div class="layui-form-item">
                                    <label class="layui-form-label required">分类</label>
                                    <div class="layui-input-block">
                                        <div name="category_id" id="category_id" required value=""></div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label required">素材</label>
                                    <div class="layui-input-block">
                                        <span></span>
                                        <input type="text" style="display:none" name="path" value=""/>
                                        <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="path">
                                            <i class="layui-icon layui-icon-upload"></i>上传文件
                                        </button>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label required">素材组别</label>
                                    <div class="layui-input-block">
                                        <div name="_group" id="_group" required value=""></div>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>

<script>

    // 相关接口
    const INSERT_API = "/admin/app/material/insert";

    // 字段 分类 category_id
    layui.use(["jquery", "xmSelect", "popup"], function () {
        // 菜单类型下拉列表
        let value = layui.$("#group").attr("value");
        let initValue = value ? value.split(",") : [];
        layui.xmSelect.render({
            el: "#group",
            name: "group",
            initValue: initValue,
            data: [{"value": "0", "name": "主素材"}, {"value": "1", "name": "混剪素材1"}, {
                "value": "2",
                "name": "混剪素材2"
            }, {"value": "3", "name": "混剪素材3"}, {"value": "4", "name": "混剪素材4"}, {
                "value": "5",
                "name": "混剪素材5"
            }, {"value": "6", "name": "混剪素材6"}, {"value": "7", "name": "混剪素材7"}, {
                "value": "8",
                "name": "混剪素材8"
            }],
            value: "0",
            layVerify: "required",
            model: {"icon": "hidden", "label": {"type": "text"}},
            clickClose: true,
            radio: true,
        })

        let value_group = layui.$("#_group").attr("value");
        let initValue_group = value_group ? value_group.split(",") : [];
        let _group = layui.xmSelect.render({
            el: "#_group",
            name: "_group",
            initValue: initValue_group,
            data: [{"value": "0", "name": "主素材"}, {"value": "1", "name": "混剪素材1"}, {
                "value": "2",
                "name": "混剪素材2"
            }, {"value": "3", "name": "混剪素材3"}, {"value": "4", "name": "混剪素材4"}, {
                "value": "5",
                "name": "混剪素材5"
            }, {"value": "6", "name": "混剪素材6"}, {"value": "7", "name": "混剪素材7"}, {
                "value": "8",
                "name": "混剪素材8"
            }],
            value: "0",
            model: {"icon": "hidden", "label": {"type": "text"}},
            clickClose: true,
            radio: true,
        })

        layui.$.ajax({
            url: "/admin/app/category/select?format=select&field=name&limit=1000",
            dataType: "json",
            success: function (res) {
                let value = layui.$("#category").attr("value");
                let initValue = value ? value.split(",") : [];
                layui.xmSelect.render({
                    el: "#category",
                    name: "category_id",
                    initValue: initValue,
                    filterable: true,
                    data: res.data,
                    model: {"icon": "hidden", "label": {"type": "text"}},
                    clickClose: true,
                    radio: true,
                    layVerify: "required",
                });
                layui.xmSelect.render({
                    el: "#category_id",
                    name: "category_id",
                    initValue: initValue,
                    filterable: true,
                    data: res.data,
                    model: {"icon": "hidden", "label": {"type": "text"}},
                    clickClose: true,
                    radio: true,
                    layVerify: "required",
                    on: function (data) {
                        layui.upload.render({
                            elem: "#path",
                            url: 'https://up-z2.qiniup.com',
                            accept: "video",
                            data: {
                                token: '<?=$token?>'
                            },
                            multiple: 1,
                            before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                                if(_group.getValue('value').length === 0) {
                                    layui.popup.failure('请选择素材分组');
                                    return false
                                }
                                layer.load(); //上传loading
                            },
                            done: function (res) {
                                if (!res.key) return layui.popup.failure('上传失败');
                                layui.$.ajax({
                                    url: INSERT_API,
                                    type: "POST",
                                    dateType: "json",
                                    data: {
                                        category_id: data.change[0].value,
                                        path: res.key,
                                        status: 1,
                                        down: 2,
                                        group: _group.getValue('value')
                                    },
                                    success: function (res) {
                                        if (res.code) {
                                            return layui.popup.failure(res.msg);
                                        }
                                    }
                                });
                            },
                            allDone: function (obj) { //当文件全部被提交后，才触发
                                layer.closeAll('loading');
                                layer.msg('上传成功');
                                parent.refreshTable();
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            }
                        });
                    }
                });
                if (res.code) {
                    layui.popup.failure(res.msg);
                }
            }
        });
    });

    // 字段 素材 path
    // layui.use(["upload", "layer", "popup", "util"], function() {
    //     let input = layui.$("#path").prev();
    //     input.prev().html(layui.util.escape(input.val()));
    //     layui.$("#attachment-choose-path").on("click", function() {
    //         parent.layer.open({
    //             type: 2,
    //             title: "选择附件",
    //             content: "/app/admin/upload/attachment",
    //             area: ["95%", "90%"],
    //             success: function (layero, index) {
    //                 parent.layui.$("#layui-layer" + index).data("callback", function (data) {
    //                     input.val(data.url).prev().html(layui.util.escape(data.url));
    //                 });
    //             }
    //         });
    //     });
    //     layui.upload.render({
    //         elem: "#path",
    //         url: "/admin/app/material/upload",
    //         accept: "video",
    //         multiple: 1,
    //         field: "__file__",
    //         done: function (res) {
    //             if (res.code) return layui.popup.failure(res.msg);
    //             this.item.prev().val(res.data.url).prev().html(layui.util.escape(res.data.url));
    //         }
    //     });
    // });

    // 字段 状态 is_main
    layui.use(["form"], function () {
        layui.$("#is_main").attr("checked", layui.$('input[name="is_main"]').val() != 0);
        layui.form.render();
        layui.form.on("switch(is_main)", function (data) {
            layui.$('input[name="is_main"]').val(this.checked ? 1 : 0);
        });
    })

    // 字段 状态 status
    layui.use(["form"], function () {
        layui.$("#status").attr("checked", layui.$('input[name="status"]').val() != 0);
        layui.form.render();
        layui.form.on("switch(status)", function (data) {
            layui.$('input[name="status"]').val(this.checked ? 1 : 0);
        });
    })

    //提交事件
    layui.use(["form", "popup"], function () {
        // 字段验证允许为空
        layui.form.verify({
            phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
            email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
            url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
            number: [/(^$)|^\d+$/, '只能填写数字'],
            date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
            identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
        });
        layui.form.on("submit(save)", function (data) {
            layui.$.ajax({
                url: INSERT_API,
                type: "POST",
                dateType: "json",
                data: data.field,
                success: function (res) {
                    if (res.code) {
                        return layui.popup.failure(res.msg);
                    }
                    return layui.popup.success("操作成功", function () {
                        parent.refreshTable();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                }
            });
            return false;
        });
    });

</script>

</body>
</html>
